<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Jumping Boxes Loader Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<main>
<svg class="loader" viewBox="0 0 128 128" width="128px" height="128px">
<g fill="var(--primary)">
<g class="rect-g">
<rect
class="rect"
rx="8"
ry="8"
x="0"
y="128"
width="40"
height="24"
transform="rotate(180)"
/>
</g>
<g class="rect-g">
<rect
class="rect"
rx="8"
ry="8"
x="44"
y="128"
width="40"
height="24"
transform="rotate(180)"
/>
</g>
<g class="rect-g">
<rect
class="rect"
rx="8"
ry="8"
x="88"
y="128"
width="40"
height="24"
transform="rotate(180)"
/>
</g>
</g>
<g fill="hsl(283,90%,50%)" mask="url(#pl-mask)">
<g class="rect-g">
<rect
class="rect"
rx="8"
ry="8"
x="0"
y="128"
width="40"
height="24"
transform="rotate(180)"
/>
</g>
<g class="rect-g">
<rect
class="rect"
rx="8"
ry="8"
x="44"
y="128"
width="40"
height="24"
transform="rotate(180)"
/>
</g>
<g class="rect-g">
<rect
class="rect"
rx="8"
ry="8"
x="88"
y="128"
width="40"
height="24"
transform="rotate(180)"
/>
</g>
</g>
</svg>
</main>
</body>
</html>